<template>
  <transition name="bounce" mode="out-in">
    <section class="mui-content pd">
      <mh-header headName="黑名单"> </mh-header>
      <div class="set-form">

        <ul class="dark-list">
          <li v-for='item in darkList'>
            <img :src="item.image">
            <span class="name">{{item.name}}</span>
            <span>{{item.age || 0}}岁 | {{item.city || '未填写'}} | {{item.education || '未填写'}}</span>
          </li>
        </ul>

      </div>

    </section>
  </transition>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header';
  import {MH_API} from "@/api/api";
  export default {
    name: "setting",
    data () {
      return {
        type: 1,
        darkList: [
          // {image:'https://ii.hywly.com/a/1/27077/1.jpg', name: '善了个哉', age: 27},
          // {image:'https://ii.hywly.com/a/1/27077/1.jpg', name: '善了个哉', age: 27},
        ]
      }
    },
    methods: {
      getTab(type){
        this.type = type;
      },
      submit(){

      },
      contact(){

      }
    },
    components: {
      MhHeader
    },
    created(){
      let self = this;
      MH_API.getLahei({
        page: 1,
        limit: 20
      }).then(res => {
        if (res.status === 200) {
          self.darkList = res.data;
        }
      })
    }
  }
</script>

<style scoped>
  .set-form{ display: block; background-color: #fff; }
  .dark-list{ display: block; padding: 0 1.5rem; }
  .dark-list li{ display: block; border-bottom: 1px solid #eee; overflow: hidden; padding: 1rem 0;}
  .dark-list li img{ float: left; width: 3.5rem; height: 3.5rem; margin-top: 0.5rem; border-radius: 50%; margin-right: 1rem;}
  .dark-list li span{ display: block; font-size: 1.3rem; color: #999; }
  .dark-list li .name{ font-size: 1.4rem; color: #333; }
</style>
